.dialogwindow {
    position: absolute;
    top: calc(100% + clamp(10px, 1vw, 20px));
    width: 100%;
    min-width: calc(clamp(90px,18vw,180px) + clamp(10px,2vw,20px));
    padding: clamp(40px, 8vw, 80px) clamp(10px, 2vw, 20px) clamp(10px, 2vw, 20px) clamp(10px, 2vw, 20px);
    display: flex;
    border-radius: clamp(7px, 1vw, 15px);
    transition: all 0.25s ease-in-out;
    animation: appear 0.15s ease-in-out;
    background-color: var(--sec-bg);
    border: 1px solid var(--pale-txt);
    overflow-x: hidden;

    .cap {
        position: absolute;
        padding: clamp(5px,1vw,10px);
        top: 0;
        left: 0;
        width: 100%;
        height: clamp(30px, 6vw, 60px);
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: var(--main-bg);
        border-bottom: 1px solid var(--pale-txt);
    }
}

.filtersdialogwindow {
    position: absolute;
    top: 0;
    width: 100%;
    padding: clamp(50px, 8vw, 80px) clamp(10px, 2vw, 20px) clamp(10px, 2vw, 20px) clamp(10px, 2vw, 20px);
    display: flex;
    flex-wrap: wrap;
    border-radius: clamp(10px, 2vw, 20px);
    transition: all 0.25s ease-in-out;
    animation: appear 0.15s ease-in-out;
    background-color: var(--sec-bg);
    border: 1px solid var(--pale-txt);
    z-index: -1;
}

@keyframes appear {
    0% {
        visibility: hidden;
        opacity: 0;
    }
    100% {
        visibility: visible;
        opacity: 1;
    }
}